<template>
  <div id='commodity_up'>
    <div class="search-box">
      <Row type="flex">
        <Row type="flex" justify="start" class="search-item-left">
          <Col class="search-item" style="display: flex;align-items: center;">
              <span class="search-label">门店名称：</span>
              <treeselect :options="shopList"
                      @select="selectListd"
                      class='input-wid'
                      :clearable="false"
                      :disable-branch-nodes="true"
                      style='width:240px'
                      :normalizer="normalizer"
                      noResultsText="未搜索符合的门店"
                      noOptionsText="门店为空"
                      placeholder="请选择门店"
                      v-model='shopName' />
            </Col>
          <Col class="search-item">
            <Button class="search-btn" type='primary' @click="doSearch">查询</Button>
          </Col>
          <Col class="search-item">
            <Button class="search-btn" @click="reset">重置</Button>
          </Col>
        </Row>
      </Row>
    </div>
    <Table stripe class="table-list" :columns="columns" :data="tableData" :loading="loading" :height="tableHeight">
      <template slot-scope="{ row }" slot="gameCoin">
        <span class="special" @click="skipList('1', row)" v-if="hasPermission('moms:product:shopcoinview')">{{row.coinCount}}</span>
      </template>
      <template slot-scope="{ row }" slot="gameTicket">
        <span class="special" @click="skipList('2', row)" v-if="hasPermission('moms:product:shopgamecouponview')">{{row.ticketCount}}</span>
      </template>
      <template slot-scope="{ row }" slot="product">
        <span class="special" @click="skipList('3', row)" v-if="hasPermission('moms:product:shopproductview')">{{row.goodCount}}</span>
      </template>
      <template slot-scope="{ row }" slot="lie">
        <span class="special" @click="skipList('4', row)" v-if="hasPermission('moms:product:shopentertainmentview')">{{row.leisureCount}}</span>
      </template>
      <template slot-scope="{ row }" slot="server">
        <span class="special" @click="skipList('5', row)" v-if="hasPermission('moms:product:shopserviceview')">{{row.serviceCount}}</span>
      </template>
      <template slot-scope="{ row }" slot="taels">
        <span class="special" @click="skipList('6', row)">{{row.ticketCardCount}}</span>
      </template>
      <template slot-scope="{ row }" slot="gameCard">
        <span class="special" @click="skipList('7', row)" v-if="hasPermission('moms:product:shopgamecardview')">{{row.gameCardCount}}</span>
      </template>
    </Table>
    <Row type='flex' justify="end" style='padding: 20px'>
      <Col>
        <Page :total="pageObj.total"
              :page-size='pageObj.pageSize'
              :current='pageObj.pageIndex'
              :page-size-opts='[20,50,100,200]'
              show-total
              show-sizer
              @on-change='changePageIndex'
              @on-page-size-change='changePageSize' />
      </Col>
    </Row>
  </div>
</template>

<script>
import { goodsShopList } from '@/api/commondity/index'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getOrgAllTree } from '@/api/system/org'
export default {
  name: 'commodity_up',
  components: { Treeselect },
  computed: {
    tableHeight () {
      let height = this.tableData.length > 10 ? 520 : 0
      return height
    }
  },
  watch: {
    '$route' (newRoute) {
      if (newRoute.name === 'commodity_up') {
        this.getData()
      }
    }
  },
  data () {
    return {
      loading: false,
      shopName: null,
      pageObj: {
        total: 0,
        pageIndex: 1,
        pageSize: 20
      },
      shopList: [],
      normalizer (node) {
        return {
          id: node.id,
          label: node.orgName,
          children: node.childList && node.childList.length ? node.childList : undefined
        }
      },
      tableData: [],
      columns: [
        {
          title: '门店名称',
          key: 'shopName',
          width: 180
        },
        {
          title: '游戏币商品',
          slot: 'gameCoin'
        },
        {
          title: '游戏券商品',
          slot: 'gameTicket'
        },
        {
          title: '商品',
          slot: 'product'
        },
        {
          title: '休闲项目',
          slot: 'lie'
        },
        {
          title: '服务',
          slot: 'server'
        },
        // {
        //   title: '新商品',
        //   slot: 'taels'
        // },
        {
          title: '游戏卡',
          slot: 'gameCard'
        }
      ]
    }
  },
  mounted () {
    this.getShopList()
    this.getData()
  },
  methods: {
    selectListd (data) {
      this.shopName = data.id
      this.getData()
    },
    doSearch () {
      this.pageObj.pageIndex = 1
      this.getData()
    },
    reset () {
      this.pageObj.pageIndex = 1
      this.pageObj.pageSize = 20
      this.shopName = null
      this.getData()
    },
    changePageIndex (index) {
      this.pageObj.pageIndex = index
      this.getData()
    },
    changePageSize (size) {
      this.pageObj.pageSize = size
      this.pageObj.pageIndex = 1
      this.getData()
    },
    // 获取门店列表
    getShopList () {
      getOrgAllTree({
        'merchantId': this.$store.state.user.merchantId,
        'orgType': 1,
        id: this.$store.state.user.orgId,
        perms: 'moms:product:salesproductview',
        status: 1
      }).then(res => {
        if (res.data.status === 200) {
          this.shopList = [res.data.data] || []
          if (res.data.data.childList.length === 0) {
            this.shopName = res.data.data.id
          }
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
      })
    },
    getData () {
      this.loading = true
      goodsShopList({
        merchantId: this.$store.state.user.merchantId,
        shopId: this.shopName,
        offset: this.pageObj.pageSize * (this.pageObj.pageIndex - 1),
        limit: this.pageObj.pageSize
      }).then(res => {
        this.loading = false
        const result = res.data || {}
        if (result.status === 200) {
          this.tableData = result.data || []
          this.pageObj.total = result.totalCount
        } else {
          this.$Message.error(`${result.error}`)
        }
      })
    },
    skipList (type, row) {
      switch (type) {
        case '1':
          this.$router.push({ name: 'gamecoin_list', params: { id: row.shopId }, query: { shopName: row.shopName } })
          break
        case '2':
          this.$router.push({ name: 'gameticket_list', params: { id: row.shopId }, query: { shopName: row.shopName } })
          break
        case '3':
          this.$router.push({ name: 'goods_list', params: { id: row.shopId }, query: { shopName: row.shopName } })
          break
        case '4':
          this.$router.push({ name: 'lie_list', params: { id: row.shopId }, query: { shopName: row.shopName } })
          break
        case '5':
          this.$router.push({ name: 'server_list', params: { id: row.shopId }, query: { shopName: row.shopName } })
          break
        case '6':
          this.$router.push({ name: 'taels_list', params: { id: row.shopId }, query: { shopName: row.shopName } })
          break
        case '7':
          this.$router.push({ name: 'gamecard_list', params: { id: row.shopId }, query: { shopName: row.shopName } })
          break
      }
    }
  }
}
</script>

<style lang="less">
#commodity_up{
  .table-list{
    .special{
      color: #2D8CF0;
      cursor: pointer;
    }
  }
  .vue-treeselect__control {
    height: 33px;
  }
}
</style>
